<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- <link rel="icon" href=""> -->
    <title>线索列表</title>
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link rel="stylesheet" href="/homemobile/kehu/css/weui.min.css">
    <link rel="stylesheet" href="/homemobile/kehu/css/base.css">
    <link rel="stylesheet" href="/css/format.css">
    <style>
        body{
          background: #f7f7f7;
        }
        .clueList_search_container{
            background: #fff;
            padding: 0.20rem;
        }
        .clueList_search_content{
            background: #efeef3;
            display: flex;
            justify-content: center;
            align-items: center;
            height: .65rem;
        }
        .clueList_search_content svg{
            width: 0.35rem;
            height: 0.35rem;
        }
        .clueList_search_content span{
            font-size: 0.30rem;
            color: #999;
            padding-left: .05rem;
        }
        .clueList_searchHide_container{
            display: flex;
            align-items: center;
        }
        .clueList_searchHide_content{
            border: 1px solid #ececec;
            display: flex;
            align-items: center;
            flex: 1;
            border-radius: .4rem;
            padding: .1rem .3rem .1rem .2rem;
        }
        .clueList_searchHide_content input{
            outline: none;
            appearance: none;
            flex: 1;
            border: none;
            font-size: .28rem;
            padding-left: .1rem;
        }
        .clueList_searchHide_content svg{
            width: 0.35rem;
            height: 0.35rem;
        }
        .clueList_searchHide_container button{
            margin-left: .2rem;
            border-radius: .4rem;
            color: #fff;
            padding: .1rem .3rem;
            background: #999999;
            outline: none;
            appearance: none;
            border: none;
            font-size: .3rem;
            cursor: pointer;
        }
        .clueList_List_container{

        }
        .clueList_List_container h5{
            font-size: .26rem;
            color: #999;
            font-weight: 400;
            padding: .1rem .3rem;
        }
        .clueList_list_content{
            background: #fff;
            padding: 0 .25rem .2rem .25rem;
        }
        .clueList_list_content li{
            border-bottom: 1px solid #ececec;
            display: flex;
            align-items: center;
            padding: .2rem 0;
        }
        .clueList_listLeft_container{
            flex: 1;
        }
        .clueList_listLeft_container h3{
            font-size: .30rem;
            color: #111;
        }
        .clueList_listStatus_container{
            padding-top: 0.05rem;
            display: flex;
            align-items: center;
        }
        .clueList_listStatus_container span{
            font-size: .28rem;
            color: #777;
        }
        .clueList_listStatus_container span:last-child{
            padding-left: .1rem;
            flex:1;
        }
        .colorGreen{
            color: #27e836 !important;
        }
        .clueList_listRight_container{

        }
        .clueList_listRight_container svg{
            width: .50rem;
            height: .50rem;
            cursor: pointer;
        }
        .clueList_listRight_container svg:last-child{
            width: .50rem;
            height: .50rem;
            margin-left: .1rem;
        }
        .clueList_list_content button{
            outline: none;
            appearance: none;
            border: none;
            color: #fff;
            margin: .2rem auto 0 auto;
            display: block;
            font-size: 0.3rem;
            border-radius: 20px;
            padding: .1rem .3rem;
            background: #1890ff;
            cursor: pointer;
        }
    </style>
  </head>
  <body>
    <div class="d-flex justify-sb align-items-center page-nav">
      <div class="page-back">
        <a href="javascript:" onClick="javascript:history.go(-1);" ><img src="/homemobile/kehu/img/back.png" alt=""></a>
        <span>公海线索</span>
      </div>
    </div>
    <div class="clueList_search_container">
        <div class="clueList_search_content" >
            <svg t="1608258752426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3157" width="50" height="50"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="3158" fill="#999"></path></svg>
            <span>搜索</span>
        </div>
        <div class="clueList_searchHide_container" style="display: none;">
            <div class="clueList_searchHide_content">
                <svg t="1608258752426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3157" width="50" height="50"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="3158" fill="#999"></path></svg>
                <input type="text" id="phone" name="phnoe" placeholder="请输入手机号" value="{$phone}">
            </div>
            <button class="search">搜索</button>
        </div>
    </div>
    <div class="clueList_List_container">
        <h5>共{count($clueLists)}个</h5>
        <ul class="clueList_list_content">
            {loop $clueLists as $clue}
            <li>
                <div class="clueList_listLeft_container">
                    <h3>线索:{$clue->mobile_phone}</h3>
                    <h3>备注:{$clue->remark}</h3>
              <!--       <div class="clueList_listStatus_container">
                        <span class="colorGreen">{$type_z[$clue->status]}</span>
                    </div> -->
                    <div class="clueList_listStatus_container">
                        <span>公海: {$h->get_mobcule_sea_by_id($clue->sea_id)['name']}</span>
                        <span>录入时间：{date("Y-m-d H:i:s")}</span>
                    </div>
                </div>
                <div class="clueList_listRight_container">
                    <button class="getClue" data-id="{$clue->id}">领取</button>
                </div>
            </li>
            {/loop}
            <!-- <button>更多</button> -->
        </ul>
    </div>
    <script src="/cdn/jquery.min.20.js"></script>
    <script src="/cdn/clipboard.js"></script>
    <script src="/fission/js/layui.all.js"></script>
    <script src="/js/ajax.js"></script>
    <script type="text/javascript">
        $(".getClue").on('click',function(){
            var id = $(this).data('id');
            var _this = $(this);
            console.log(id);
            // return;
            myAjaxPost(false, true, 'get_sea_clue.html', { id:id}, function (resp) {
                console.log(resp);
                if(resp.status == 'success'){
                    tusi(resp.msg);
                    _this.text('已领取');
                    _this.removeClass('getClue');
                    _this.css('background',"#999999");
                }else{
                    tusi(resp.msg);
                }
            });
        })
    </script>
    <!-- 复制粘贴 -->
    <script>
        var clipboard = new ClipboardJS('.copyNum');
        clipboard.on('success', function(e) {
            alert('复制微信号成功');
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    </script>
    <script type="text/javascript">
        $('.clueList_search_content').click(function(){
            $('.clueList_search_content').css('display','none');
            $('.clueList_searchHide_container').css('display','flex');
            $('.clueList_searchHide_content input').focus();
        })
        $(".callPhone").click(function(e){
            console.log(e.currentTarget.dataset.tel)
            window.location.href = 'tel:'+e.currentTarget.dataset.tel;
        })
        $(".search").click(function(){
            // background: #1890ff;
            var phone = $("input[name=phnoe]").val();
            if(phone){
                location.href = "mobile_sea_clue.html?phone="+phone;
            }
            return false;   
        })
        $("#phone").bind('input propertychange', function() {
            var phone = $(this).val();
            if(phone){
                $(this).parent().next().css('background', '#1890ff');
            }else{
                $(this).parent().next().css('background', '#999999');
            }
        })
    </script>
  </body>
</html>
